<template>
  <div id="resgister">
    <van-nav-bar title="注册" left-arrow fixed @click-left="onClickLeft" />

    <div class="logo">
      <img src="../../public/wx_login_logo.png" alt="" />
    </div>

    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="repassword"
        type="password"
        name="确认密码"
        label="确认密码"
        placeholder="请再次输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 50px 16px 16px 16px">
        <van-button round block color="#f73a3a" native-type="submit"
          >注册</van-button
        >
        <van-button
          style="margin: 15px 0"
          round
          block
          type="default"
          @click="onRegister"
          >已有账号，返回登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        username: "",
      password: "",
      repassword: "",
      }
    },
    methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      this.$router.push("index");
    },
    onRegister() {
      this.$router.push("login");
    },
  },
  }
</script>

<style lang="scss">
#resgister{
  .van-nav-bar {
    background-color: #f73a3a;
    .van-nav-bar__title {
      color: #fff;
    }
    .van-icon {
      color: #fff;
    }
  }
  .logo {
    margin-top: 46px;
    padding: 50px;
    img {
      width: 100%;
    }
  }
}
</style>